function FileWidgt(ui){
    this.ui = ui;
    this.data = "";//记录选中且已经上传并返回的结果
    this.files = [];//用于记录已选中的文件，防止重复上传
    this.filepath = document.createElement("input")
    this.filepath.type = "hidden"
    this.filepath.name = this.ui.getAttribute("name");
    this.ui.parentNode.appendChild(this.filepath)
    var defaultVal = this.ui.getAttribute("value");
    if(defaultVal != undefined && defaultVal != '') {
        var imgs = defaultVal.split(",")
        for(var i = 0;i < imgs.length;i++) {
            var fileholder = document.createElement("input");//内部隐藏的输入框
            fileholder.setAttribute("type","file");
            fileholder.setAttribute("name","file");
            var placeholder = document.createElement("div");
            placeholder.setAttribute("class","image-item");
            var closeButton = document.createElement('div');//关闭按钮
            closeButton.setAttribute("class","image-close");
            closeButton.innerHTML = 'X';
            placeholder.appendChild(fileholder);
            placeholder.appendChild(closeButton);
            placeholder.setAttribute("image-data",imgs[i]);
            placeholder.style.backgroundImage = 'url('+imgs[i]+')';
            this.ui.appendChild(placeholder);
        }
        //this.filepath.setAttribute("value",defaultVal);
        this.filepath.value = defaultVal;
        this.data = defaultVal
    }
}

FileWidgt.prototype.newPlaceholder = function(s){
    var fileholder = document.createElement("input");//内部隐藏的输入框
    fileholder.setAttribute("type","file");
    fileholder.setAttribute("name","file");

    var placeholder = document.createElement("div");//显示图片的容器
    placeholder.setAttribute("class","image-item space");
    var closeButton = document.createElement('div');//关闭按钮
    closeButton.setAttribute("class","image-close");
    closeButton.innerHTML = 'X';
    placeholder.appendChild(fileholder);
    placeholder.appendChild(closeButton);
    this.ui.appendChild(placeholder);//显示图片的容器加入最外层容器

    var that = this;
    closeButton.addEventListener('click',function(event){
        event.stopPropagation();
        event.cancelBubble = true;
        setTimeout(function(){
            that.data = that.data.replace(placeholder.getAttribute("image-data"),"");//data中去除该关闭的图片结果
            that.data = that.data.replace(",,",",");
            if(that.data.length > 0 && that.data.charAt(0) == ","){
                that.data = that.data.substring(1);
            }else if(that.data.length > 0 && that.data.charAt(that.data.length - 1) == ","){
                that.data = that.data.substring(0,that.data.length - 1);
            }
            that.ui.removeChild(placeholder);//去除关闭的显示容器
        },0);
    },false);
    placeholder.addEventListener("click",fileholder.onclick,false);//点击调用文件上传
    fileholder.addEventListener("change",function(e){//选中文件后上传图片
        if(that.files.join(",").indexOf(fileholder.value) == -1){

            var formData = new FormData();
            formData.append("file",fileholder.files[0]);
            var xhr = null;
            if(window.ActiveXObject){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }else{
                xhr = new XMLHttpRequest();
            }


            xhr.open(s.method||'POST',s.url,true);


            xhr.onreadystatechange  = function(){//Ajax文件上传返回
                if(xhr.readyState == 4 && xhr.status == 200){
                    var filename = JSON.parse(xhr.responseText).msg;
                    placeholder.style.backgroundImage = 'url('+filename+')';//替换当前添加图片为上传文件的图片
                    if(placeholder.getAttribute("image-data") == undefined ||placeholder.getAttribute("image-data") == ""){
                        placeholder.classList.remove('space');
                        placeholder.removeEventListener("click",fileholder.onclick,false);
                        placeholder.removeChild(fileholder);
                        that.newPlaceholder(s);//新建一个添加的图标
                    }
                    //给data值添加当前上传的文件地址
                    if(that.data == ""){
                        that.data = filename;
                        placeholder.setAttribute("image-data",filename);
                        that.filepath.value = that.data
                    }else{
                        that.data += "," + filename;
                        that.filepath.value = that.data
                        placeholder.setAttribute("image-data",filename);
                    }
                }
            }
            xhr.send(formData);
        }
    },false);
}
